
<template>
  <div>
    <el-dialog
      v-el-drag-dialog
      :title="'下单页面显示'"
      :visible.sync="visible"
      :modal="false"
      width="350px"
    >
      <lb-table
        ref="lbTable"
        max-height="400"
        element-loading-text="加载中"
        :column="tableData.column"
        :data="tableData.data"
        :pagination="false"
        :total="tableData.total"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="reset">
          重置
        </el-button>
        <el-button @click="visible = false">
          关闭
        </el-button>
        <el-button :loading="$loadingPlugin.add || $loadingPlugin.edit" type="primary" @click="success">
          保存
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    name: 'setting',
    data() {
      return {
        visible: false,
        tableData: {
          column: [
            {
              prop: 'settingName',
              label: ''

            },
            {
              prop: 'visible',
              label: '是否显示',
              align: 'center',
              render: (h, { row, $index }) => <div onClick={() => row.visible = !row.visible}><svg-icon icon-class={row.visible ? 'eye-open' : 'eye'} /></div>

            },
            {
              prop: 'required',
              label: '是否必填',
              align: 'center',
              render: (h, { row, $index }) => <div onClick={() => row.required = !row.required}><i class={row.required ? 'el-icon-success' : 'el-icon-success fail'} /></div>
            }

          ],
          data: [
            { settingName: '身份证', required: true, visible: true, paramName: 'sfzh' },
            { settingName: '销售人员', required: true, visible: true, paramName: 'saleMan' },
            { settingName: '保险信息', required: true, visible: true, paramName: 'insurance' },
            { settingName: '售保人', required: true, visible: true, paramName: 'insuranceMan' },
            { settingName: '营业执照', required: true, visible: true, paramName: 'zzbh' }
          ]
        }
      }
    },
    created() {

    },
    mounted() {
      if (localStorage.phoneOrderRules) {
        this.tableData.data = JSON.parse(localStorage.phoneOrderRules)
        // console.log(this.tableData.data)
        // 本地保存设置
        this.$parent.settingList.sfzh = this.tableData.data[0].visible
        const list = this.tableData.data
        const setList = this.$parent.settingList
        const rules = this.$parent.rules
        for (var val in setList) {
          var v = list.find(l => l.paramName === val)
          setList[val] = v.visible
        }
        for (var value in rules) {
          // console.log(rules[value])
          var flag = list.find(l => l.paramName === value)
          rules[value] = [{ ...rules[value][0], required: flag.required }]
        }
      }
    },
    methods: {
      open() {
        this.visible = true
      },
      success() {
        // 身份证 sfzh 营业执照 zzbh 销售员 saleMan 保险 insurance  售保人 insuranceMan
        this.$parent.settingList.sfzh = this.tableData.data[0].visible
        const list = this.tableData.data
        const setList = this.$parent.settingList
        const rules = this.$parent.rules
        for (var val in setList) {
          var v = list.find(l => l.paramName === val)
          setList[val] = v.visible
        }
        for (var value in rules) {
          var flag = list.find(l => l.paramName === value)
          rules[value] = [{ ...rules[value][0], required: flag.required }]
        }
        // 本地保存设置
        // localStorage.phoneOrderRules = JSON.stringify(this.tableData.data)
        localStorage.phoneOrderRules = JSON.stringify(this.tableData.data)
        this.$message.success('修改成功')
        this.visible = false
      },
      reset() {
        localStorage.phoneOrderRules = ''
        this.$message.success('修改成功')
        this.visible = false
      }
    }
  }
</script>

<style lang="scss" scope>
  .iconfont {
    font-size: 16px;
  }
  .fail {
    color: #a9a9a9;
  }
</style>

